<template>
  <div class="video_mv">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="视频" name="first">
          <Video></Video>
        </el-tab-pane>
        <el-tab-pane label="MV" name="second">
          <NewMv></NewMv>
          <Rcmd></Rcmd>
          <MvRank></MvRank>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import NewMv from '../../mv/NewMv.vue'
import Rcmd from '../../mv/Rcmd.vue'
import MvRank from '../../mv/MvRank.vue'
import Video from '../../mv/Video.vue'
export default {
  components: {
    NewMv,
    Rcmd,
    MvRank,
    Video
  },
  data () {
    return {
      activeName: 'second'
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
  .video_mv {
    width: 82%;
    overflow: auto;
    .el-tabs {
      width: 95%;
      margin: 10px auto;
    }
  }
  /deep/ .el-tabs .el-tabs__item {
    font-size: 20px;
    padding: 0 40px;
  }
  /deep/ .el-tabs__nav-scroll, .el-tabs__nav {
    display: flex;
    justify-content: space-around;
  }
  /deep/ .el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 80px!important;
    height: 3px;
    background-color: #409EFF;
    z-index: 1;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
  }
  /deep/ .el-tabs .el-tabs__active-bar .is-top {
    width: 60px!important;
  }
</style>
